
"use client"
import React, { useState } from 'react';
import { Button, DatePicker, Divider, Input, Menu, Select, Space, Table, Tag } from 'antd';
import type { MenuProps, TableProps } from 'antd';
import { useRouter } from 'next/navigation';
import {
  CheckCircleFilled,
  EditFilled,
  VerticalAlignTopOutlined,
  DeleteFilled,
  SearchOutlined,
  RedoOutlined,
  ZoomInOutlined
} from '@ant-design/icons';
import { log } from 'console';
type TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];
interface DataType {
  id: number
  key: string
  name: string
  Customer: string
  stage: string
  bjnum: string
  price: string
  time: number
  days: number
}
const columns: TableProps<DataType>['columns'] = [
  {
    title: ' 订单标题',
    dataIndex: 'name',
    render: (name) => <div style={{ color: 'rgb(0,121,254)' }}>{name}</div>,
  },
  {
    title: '关联客户',
    dataIndex: 'Customer',
    render: (Customer) => <div style={{ color: 'rgb(0,121,254)' }}>{Customer}</div>,
  },
  {
    title: ' 订单阶段',
    dataIndex: 'stage'
  },
  {
    title: '报价记录',
    dataIndex: 'bjnum',
    render: (bjnum) => <div style={{ color: 'rgb(0,121,254)' }}>{bjnum}</div>,
  },
  {
    title: '报价总金额',
    dataIndex: 'price'
  },
  {
    title: '最后跟进',
    dataIndex: 'time',
    render: (time) => <div>{new Date(time).toLocaleString()}</div>,
  },
  {
    title: '未跟进天数',
    dataIndex: 'days'
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a><CheckCircleFilled />跟进</a>
        <a><EditFilled />编辑</a>
        <a><VerticalAlignTopOutlined />置顶</a>
        <a><DeleteFilled />删除</a>
      </Space>
    ),
  },
];
//表格数据
const data: DataType[] = [
  {
    id: 1,
    key: '1',
    name: ' 订单标题',
    Customer: ' 深圳市亿恩科技有限公司',
    stage: '初步洽谈',
    bjnum: '10条',
    price: '1000.00',
    time: 1744787085865,
    days: 30
  },
  {
    id: 2,
    key: '2',
    name: ' 订单标题',
    Customer: ' 深圳市亿恩科技有限公司',
    stage: '初步洽谈',
    bjnum: '10条',
    price: '1000.00',
    time: 1744787085865,
    days: 30
  }, {
    id: 3,
    key: '3',
    name: ' 订单标题',
    Customer: ' 深圳市亿恩科技有限公司',
    stage: '初步洽谈',
    bjnum: '10条',
    price: '1000.00',
    time: 1744787085865,
    days: 30
  },
  {
    id: 4,
    key: '4',
    name: ' 订单标题',
    Customer: ' 深圳市亿恩科技有限公司',
    stage: '初步洽谈',
    bjnum: '10条',
    price: '1000.00',
    time: 1744787085865,
    days: 30
  },
  {
    id: 5,
    key: '5',
    name: ' 订单标题',
    Customer: ' 深圳市亿恩科技有限公司',
    stage: '初步洽谈',
    bjnum: '10条',
    price: '1000.00',
    time: 1744787085865,
    days: 30
  },
  {
    id: 6,
    key: '6',
    name: ' 订单标题',
    Customer: ' 深圳市亿恩科技有限公司',
    stage: '初步洽谈',
    bjnum: '10条',
    price: '1000.00',
    time: 1744787085865,
    days: 30
  }

];

//三级导航数据
type MenuItem = Required<MenuProps>['items'][number];

 const items: MenuItem[] = [
    {
      key: '/fff/dingdan/allding',
      label: (
        <div >
          全部订单
        </div>
      ),
    },
    {
      key: '/fff/dingdan/mydingdan',
      label: (
        <div>
          我的订单
        </div>
      ),
    },
    {
      key: '/fff/dingdan/xiashudingdan',
      label: (
        <div>
          下属订单
        </div>
      ),
    },
    {
      key: '/fff/dingdan/xiashuxiezuo',
      label: (
        <div>
          下属写作
        </div>
      ),
    },
    {
      key: '/fff/dingdan/woxiezuo',
      label: (
        <div>
          我的协作
        </div>
      )
    },
    {
      key: '/fff/dingdan/adddingdan',
      label: (
        <div>
          添加订单
        </div>
      ),
    }
  ];

const App: React.FC = () => {
  const router = useRouter()
  const [current, setCurrent] = useState('mail');

  const onClick: MenuProps['onClick'] = (e) => {
    setCurrent(e.key);
    router.push(e.key)
  };
  //多选
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    // console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,

    ]
  };
  return (
    <>
      <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items}/>
      <Divider />
      <div>
        <Space>

          <Input placeholder="搜索关键词" />
          <Select
            placeholder=" 订单阶段"
            style={{ width: 150 }}
            options={[
              { value: '初步洽谈', label: '初步洽谈' },
            ]}
          />
          <Select
            placeholder=" 订单来源"
            style={{ width: 150 }}
            options={[
              { value: '1', label: '1' },
            ]}
          />
          <Select
            placeholder="成交机率"
            style={{ width: 150 }}
            options={[
              { value: '1', label: '1' },
            ]}
          />
          <DatePicker placeholder='预计签单日期' />
          <Button type="primary"><SearchOutlined />查询</Button>
          <Button><RedoOutlined />重置</Button>
          <Button style={{ color: 'rgb(0,121,254)' }}><ZoomInOutlined />高级搜索</Button>
        </Space>

        <Divider />
      </div>
      <Table<DataType> rowSelection={rowSelection} bordered columns={columns} dataSource={data} pagination={{ defaultPageSize: 8 }} />
    </>
  )

};

export default App;